import React, { useState } from 'react';
import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space, Modal } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import request from '../../../http';

const selectStudent = (props: any) => {
  //获取表单的数据传给父组件
  //数据传送父组件
  const [selectGroup, setSelectGroup]: any = useState({
    name: null, //选择分组
    userName: null, //选择学生
  });
  //把数据装到data里面，然后返回去
  let xzxsdata: any = [selectGroup];

  //console.log("课程选择学生子组件传来的值",xzxsdata);

  const [Xzfz, setXzfz] = React.useState([{}]);
  const [Xzxs, setXzxs] = React.useState([{}]);

  //const [groupid, setGroupId] = React.useState([{}]);
  React.useEffect(() => {
    //12课程管理选择分组下拉框
    console.log('Xzfz的值', Xzfz);
    request
      .post('/courseManage/admin/query/all/groups', {
        courseId: 118,
      })
      .then(
        (result: any) => {
          console.log('课程管理，选择分组下拉框地址result数据', result);
          if (result.success) {
            //获得成功响应返回的数据
            console.log(
              '课程管理，选择分组下拉框地址result.data数据',
              result.data,
            );
            //获取教师信息接口传来的数据
            // const data4 = result.data.map((item: any) => ({
            //   key: item.id,
            //   name: item.name,
            //   total: item.total,
            // }));

            setXzfz(result.data);
            console.log('Xzfz的值222', Xzfz);
          }
        },
        (error) => {
          //错误返回错误信息
          console.log('请求错误');
        },
      );
    //  //14课程管理 选择学生下拉框地址 缺请求参数
    //  request
    //  .post('/courseManage/admin/query/group/in/all/students',{
    //   projectGrupId:202106200059,
    //  })
    //  .then(
    //    (result: any) => {
    //      console.log("课程管理，选择学生下拉框地址result数据",result);
    //      if (result.success) {
    //        //获得成功响应返回的数据
    //        console.log("课程管理，选择学生下拉框地址result.data数据",result.data);
    //        setXzxs(result.data);
    //      }
    //    },
    //    (error) => {
    //      //错误返回错误信息
    //      console.log('请求错误');
    //    },
    //  );
  }, []);

  props.callback(xzxsdata);

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  // const [ID,setId]:any= useState();
  // const getId=(e:any)=>{
  //   setId(e.target.selectedIndex)
  // }
  const [ID, setId]: any = useState();

  const zhixingjiekou = () => {
    //14课程管理 选择学生下拉框地址 缺请求参数
    console.log('选择学生请求地址ID的值', ID);
    request
      .post('/courseManage/admin/query/group/in/all/students', {
        projectGrupId: ID,
      })
      .then(
        (result: any) => {
          console.log('课程管理，选择学生下拉框地址result数据', result);
          if (result.success) {
            //获得成功响应返回的数据
            console.log(
              '课程管理，选择学生下拉框地址result.data数据',
              result.data,
            );
            setXzxs(result.data);
          }
        },
        (error) => {
          //错误返回错误信息
          console.log('请求错误');
        },
      );
  };

  return (
    <div>
      <Form>
        <div>
          <div
            style={{
              marginTop: '20px',
              marginLeft: '0px',
              float: 'left',
              width: '400px',
            }}
          >
            <Form.Item name="name" label="选择分组：">
              <Select
                placeholder="请选择"
                allowClear
                onChange={(e: any, index: any) => {
                  console.log('选择分组e', e);
                  setId(index.key);
                  setSelectGroup({
                    ...selectGroup,
                    name: e,
                  });
                }}
              >
                {Xzfz.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.name}
                    </Option>
                  );
                  //setGroupId(cNameObj.id);
                })}
              </Select>
            </Form.Item>
          </div>

          <div
            style={{
              marginTop: '5px',
              marginLeft: '0px',
              float: 'left',
              width: '400px',
            }}
          >
            <Form.Item name="userName" label="选择学生：">
              <Select
                placeholder="请选择"
                allowClear
                onChange={(e: any) => {
                  console.log('选择学生e', e);
                  //setName(e.target.value);
                  setSelectGroup({
                    ...selectGroup,
                    userName: e,
                  });
                }}
                onClick={zhixingjiekou}
              >
                {Xzxs.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.studentId}>
                      {cNameObj.userName}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ clear: 'left', width: '600px' }}></div>
        </div>
      </Form>
    </div>
  );
};

export default selectStudent;
